<template>
  <div class="title">
    <el-row :gutter="10">
      <el-col :span="titleSpan">
        <span style="border-left: 5px solid #409EFF; padding-left: 10px;">{{title}}</span>
      </el-col>
      <!--suppress HtmlDeprecatedAttribute -->
      <el-col :span="btnSpan" align="right">
        <slot/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'XumTitle',
  props: {
    title: {
      required: true,
      type: [String, Number],
      default: ''
    },
    titleSpan: {
      required: false,
      type: Number,
      default: 6
    }
  },
  computed: {
    btnSpan () {
      return 24 - this.titleSpan
    }
  }
}
</script>

<style scoped>
  .title{
    margin-bottom: 16px;
  }
</style>
